<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">

	<head>
		<title></title>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

		<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="css/base.min.css" />

		<style>
			html,
			body {
				width: 100%;
				height: 100%;
				background: #f5f5f5;
			}
			
			.topFrame {
				/*background: #6AB494;*/
				width: 100%;
				height: 60%;
			}
			
			.mainFrame {
				width: 100%;
				height: 40%;
				/*background: #fff;*/
				padding-top: 1.2em;
			}
			
			.btnFrame {
				text-align: center;
				margin-top: -4em;
				margin-bottom: 1em;
			}
			
			.col-xx-4 {
				text-align: center;
				color: #999999;
			}
			
			.row2 {
				margin-top: 1em;
			}
		</style>
	</head>

	<body ontouchstart>
		<div class="topFrame" id="topFrame"></div>
		<div class="btnFrame">
			<button onclick="getHealthData();" class="btn btn-brand  waves-light waves-attach waves-button">手动检测</button>
		</div>

		<div class="mainFrame container">
			<div class="row">
				<div class="col-xx-4">
					<a onclick="healthPlay('light');" class="fbtn fbtn-brand waves-light waves-attach waves-button">
						<img class="icon" src="img/icon/iconfont-light.png"></a>
					光照
				</div>
				<div class="col-xx-4">
					<a onclick="healthPlay('sound');" class="fbtn fbtn-brand waves-light waves-attach waves-button">
						<img class="icon" src="img/icon/iconfont-shengyin.png"></a>
					声音
				</div>
				<div class="col-xx-4">
					<a onclick="healthPlay('sleep');" class="fbtn fbtn-brand waves-light waves-attach waves-button">
						<img class="icon" src="img/icon/iconfont-shuimian.png"></a>
					睡眠
				</div>

			</div>
			<!--<div class="hr"></div>
	-->
			<div class="row row2">
				<div class="col-xx-4">
					<a onclick="healthPlay('temp');" class="fbtn fbtn-brand waves-light waves-attach waves-button">
						<img class="icon" src="img/icon/iconfont-wendu.png"></a>
					温度
				</div>
				<div class="col-xx-4">
					<button data-toggle="modal" href="#feedback" class="btn  fbtn fbtn-brand waves-attach waves-effect waves-button waves-light"><img class="icon" src="img/icon/iconfont-fankui.png"></a></button>
					<p>反馈</p>
				</div>
				<div class="col-xx-4">
					<a class="fbtn fbtn-brand waves-light waves-attach waves-button" onclick="">
						<span class="icon">add</span></a>
					Add
				</div>
				<!--<div class="col-xx-4">
					<a class="fbtn fbtn-brand waves-light waves-attach waves-button" onclick="openWin('music');">
						<img class="icon" src="img/icon/iconfont-yinle.png"></a>
					音乐
				</div>-->
			</div>
		</div>
		<div aria-hidden="true" class="modal fade" id="feedback" role="dialog" tabindex="-1">
			<div class="modal-dialog modal-xs">
				<div class="modal-content" style="text-align: center;">
					<div class="modal-heading">
						<h2 class="modal-title" style="text-align: center;margin: 0;">感谢您的反馈</h2></div>
					<div class="modal-inner" style="padding: 0;">
						<div class="form-group form-group-brand form-group-label">
							<label class="floating-label" for="feedbackData"> 请输入您的反馈信息 </label>
							<textarea class="form-control" id="feedbackData" rows="5"></textarea>
						</div>
					</div>
					<div class="modal-footer">
						<button style="font-size:17px;" onclick="feedback();" class="btn  btn-flat  btn-brand waves-attach waves-effect waves-button waves-light" data-dismiss="modal">确认</button>
						<a style="font-size:17px;" class="btn btn-flat btn-brand-accent waves-attach waves-button waves-effect" data-dismiss="modal">关闭</a>
					</div>

				</div>
			</div>
		</div>
		<div aria-hidden="true" class="modal fade" id="healthPlay" role="dialog" tabindex="-1">
			<div class="modal-dialog modal-xs">
				<div class="modal-content" style="text-align: center;">

					<div class="modal-inner " style="padding: 0;margin-top: 0px">
						<nav class="tab-nav tab-nav-brand " style="margin-top: 0px">
							<ul class="nav nav-justified">
								<li class="active">
									<a data-toggle="tab" class="now" href="#now">当前</a>
								</li>
								<li>
									<a data-toggle="tab" onclick="historyHealth();" class="history" href="#history">历史</a>
								</li>
							</ul>
						</nav>
						<div class="tab-content">
							<div role="tabpanel" class="tab-pane active" id="now">
								<div>123</div>
							</div>

							<div role="tabpanel" class="tab-pane" id="history">
								<div>加载中...</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<a style="font-size:17px;text-align:center;" class="btn btn-flat btn-brand waves-attach waves-button waves-effect" data-dismiss="modal">关闭</a>
					</div>

				</div>
			</div>
		</div>

		<script src="js/appcan/appcan.js"></script>
		<script src="js/appcan/appcan.control.js"></script>
		<script src="js/lib/echarts.min.js"></script>
		<script src="js/lib/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/lib/base.min.js"></script>
		<script src="js/index.js"></script>
		<script type="text/javascript">
			/**
			 *页面初始化 
			 */
			appcan.ready(function() {
				health();
				setInterval(function() {
					getHealthData();
				}, 2000);
			});

			function feedback() {
				var data = {
					'feedback': $('#feedbackData').val()
				}
				var url = 'http://192.168.155.1:8080/Match/babyBuddy/public/api/feedback';
				$.ajax({
					type: "post",
					url: url,
					data:data,
					headers: {
						'Authorization': 'Bearer ' + token
					},
					dataType: 'json',
					success: function(d) {
						alert(d.message);
					},
					error: function(e) {
						console.log(e);
						//							alert(e);
					}
				});
			}

			function historyHealth() {
			}
		</script>

	</body>

</html>